<template>
	<view class="register-container">
		<!-- 登录方式切换 -->
		<view class="login-tabs">
			<view :class="['tab-item', loginType == 'account' ? 'active' : '']" @click="switchLoginType('account')">
				账号登录
			</view>
			<view :class="['tab-item', loginType == 'phone' ? 'active' : '']" @click="switchLoginType('phone')">手机登录
			</view>
		</view>

		<view class="form-container">
			<view class="form-item">
				<view class="icon-wrapper">
					<text class="iconfont">&#xe67b;</text>
				</view>
				<input type="number" placeholder="请输入手机号" v-model="phone" @input="handlePhoneInput" />
			</view>

			<!-- 账号登录表单 -->
			<view class="form-item" v-if="loginType === 'account'">
				<view class="icon-wrapper">
					<text class="iconfont">&#xe682;</text>
				</view>
				<input type="password" placeholder="请输入密码" v-model="password" password="true" />
			</view>

			<!-- 手机登录表单 -->
			<view class="form-item" v-if="loginType === 'phone'">
				<view class="icon-wrapper">
					<text class="iconfont">&#xe67e;</text>
				</view>
				<input type="number" placeholder="请输入验证码" v-model="code" />
				<view class="code-btn" :class="{disabled: codeBtnDisabled}" @click="sendCode">{{codeBtnText}}</view>
			</view>
		</view>

		<button class="register-btn" @click="submitForm">登录</button>
		<view class="pswd">
			<navigator url="findPwd" hover-class="none">
				<view>忘记密码？</view>
			</navigator>
			<navigator url="register" hover-class="none">
				<view>没有账号?注册</view>
			</navigator>
		</view>

		<view class="agreement">
			<checkbox-group v-model="agreeTerms" @change="checks">
				<checkbox value="agree" class="checkbox"></checkbox>
			</checkbox-group>
			<view class="checkbox-label">
				我已阅读并同意
				<navigator url="/pages/setting/webview?type=1" class="link">《用户许可》</navigator>
				和
				<navigator url="/pages/setting/webview?type=2" class="link">《隐私协议》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/request';
	export default {
		data() {
			return {
				phone: '',
				password: '',
				code: '',
				wxCode: '',
				isPhoneValid: false,
				agreeTerms: [],
				loginType: 'account', // 默认账号登录
				codeBtnText: '获取验证码',
				codeBtnDisabled: false,
				codeCountdown: 0,
				codeTimer: null
			};
		},
		computed: {
			canSubmit() {
				return this.isPhoneValid && this.password && this.agreeTerms.includes('agree');
			}
		},
		methods: {
			// 切换登录方式
			switchLoginType(type) {
				this.loginType = type;
				// 重置表单
				this.code = '';
				this.codeBtnText = '获取验证码';
				this.codeBtnDisabled = false;
				this.codeCountdown = 0;
				clearInterval(this.codeTimer);
			},

			// 发送验证码
			sendCode() {
				if (!this.isPhoneValid) {
					uni.showToast({
						title: '请输入有效的手机号',
						icon: 'none'
					});
					return;
				}

				if (this.codeBtnDisabled) return;

				// 调用发送验证码接口，type==5
				api.getSmsCode({
					phone: this.phone,
					type: 5
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: '验证码发送成功',
							icon: 'success'
						});

						// 开始倒计时
						this.codeCountdown = 60;
						this.codeBtnDisabled = true;
						this.codeBtnText = `重新发送(${this.codeCountdown}s)`;

						this.codeTimer = setInterval(() => {
							this.codeCountdown--;
							this.codeBtnText = `重新发送(${this.codeCountdown}s)`;

							if (this.codeCountdown <= 0) {
								clearInterval(this.codeTimer);
								this.codeBtnDisabled = false;
								this.codeBtnText = '获取验证码';
							}
						}, 1000);
					} else {
						uni.showToast({
							title: res.msg || '验证码发送失败',
							icon: 'none'
						});
					}
				}).catch(error => {
					console.error('发送验证码失败', error);
					uni.showToast({
						title: error.msg || '发送验证码失败',
						icon: 'none'
					});
				});
			},

			checks(e) {
				this.agreeTerms = e.detail.value;
				console.log('e', e.detail.value)
			},
			handlePhoneInput(e) {
				const phone = e.detail.value;
				this.phone = phone;
				// 简单的手机号验证
				this.isPhoneValid = /^1[3-9]\d{9}$/.test(phone);
			},

			// 提交表单
			submitForm() {
				var that = this;
				if (!that.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}

				if (that.loginType === 'account') {
					// 账号登录验证
					if (!that.password) {
						uni.showToast({
							title: '请输入密码',
							icon: 'none'
						});
						return;
					}
				} else {
					// 手机登录验证
					if (!that.code) {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						});
						return;
					}
				}

				if (!that.agreeTerms.includes('agree')) {
					uni.showToast({
						title: '请阅读并同意隐私协议',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '登录中...'
				});

				if (that.loginType === 'account') {
					// 账号登录逻辑
					uni.login({
						provider: 'weixin',
						success: (res) => {
							that.wxCode = res.code;
							const loginData = {
								wx_code: that.wxCode,
								phone: that.phone,
								password: that.password
							};
							api.wxchatLogin(loginData)
								.then(res2 => {
									uni.hideLoading();
									if (res2.code === 1) {
										// 登录成功，存储token
										uni.setStorageSync('token', res2.data.token);
										uni.showToast({
											title: '登录成功',
											icon: 'success'
										});
										// 跳转到个人中心
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/index/index'
											});
										}, 1500);
									} else {
										uni.showToast({
											title: res2.msg || '登录失败',
											icon: 'none'
										});
									}
								})
								.catch(error => {
									uni.hideLoading();
									console.error('登录失败', error);
									uni.showToast({
										title: error.msg,
										icon: 'none'
									});
								});
						},
						fail: () => {
							uni.hideLoading();
							uni.showToast({
								title: '获取微信登录信息失败',
								icon: 'none'
							});
						}
					});
				} else {
					// 手机验证码登录逻辑

					uni.login({
						provider: 'weixin',
						success: (res) => {
							that.wxCode = res.code;
							const loginData = {
								wx_code: that.wxCode,
								phone: that.phone,
								code: that.code
							};
							api.phoneLogin(loginData)
								.then(res2 => {
									uni.hideLoading();
									if (res2.code === 1) {
										// 登录成功，存储token
										uni.setStorageSync('token', res2.data.token);
										uni.showToast({
											title: '登录成功',
											icon: 'success'
										});
										// 跳转到个人中心
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/index/index'
											});
										}, 1500);
									} else {
										uni.showToast({
											title: res2.msg || '登录失败',
											icon: 'none'
										});
									}
								})
								.catch(error => {
									uni.hideLoading();
									console.error('登录失败', error);
									uni.showToast({
										title: error.msg || '登录失败',
										icon: 'none'
									});
								});
						},
						fail: () => {
							uni.hideLoading();
							uni.showToast({
								title: '获取微信登录信息失败',
								icon: 'none'
							});
						}
					});

				}
			},

			// 返回上一页
			navigateBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style scoped>
	.register-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #fff;
	}

	/* 登录选项卡样式 */
	.login-tabs {
		display: flex;
		justify-content: center;
		margin: 40rpx 0;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.tab-item {
		padding: 20rpx 40rpx;
		font-size: 32rpx;
		color: #666;
		position: relative;
	}

	.tab-item.active {
		color: #e61e2b;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -1rpx;
		left: 0;
		width: 100%;
		height: 4rpx;
		background-color: #e61e2b;
	}

	/* 验证码按钮样式 */
	.code-btn {
		width: 180rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #e61e2b;
		color: #fff;
		font-size: 24rpx;
		border-radius: 25rpx;
		position: absolute;
		right: 20rpx;
	}

	.code-btn.disabled {
		background-color: #cccccc;
		color: #666;
		pointer-events: none;
	}

	.pswd {
		padding: 0 40rpx;
		line-height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #666;
	}

	.agreement {
		margin: 120rpx 50rpx 0;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #666;
		position: fixed;
		bottom: 80rpx;
	}

	.checkbox-label {
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}

	.link {
		color: #e61e2b;
		text-decoration: underline;
		margin: 0 15rpx;
	}

	.form-container {
		padding: 40rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #e0e0e0;
		padding: 20rpx 0;
		position: relative;
	}

	.icon-wrapper {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #e61e2b;
	}

	.icon {
		font-family: 'iconfont';
		font-size: 32rpx;
	}

	input {
		flex: 1;
		height: 60rpx;
		font-size: 28rpx;
		padding-left: 20rpx;
	}

	.code-btn {
		width: 180rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #e61e2b;
		color: #fff;
		font-size: 24rpx;
		border-radius: 25rpx;
		position: absolute;
		right: 0;
		z-index: 999999999;
	}

	.register-btn {
		margin: 60rpx 40rpx;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #e61e2b;
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
	}
</style>